<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { get } from "@/request/request";
import { config } from "@/config";
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import TnListItem from "@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue";
import TnPopup from "@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue";

const data = ref({});
const showGroup = ref(false);
const showPhone = ref(false);
onShow(() => {
  get("/teacher", {
    "Content-Type": "application/x-www-form-urlencoded",
    sessionKey: uni.getStorageSync("sessionKey"),
  }).then((res) => {
    console.log("教师端：", res);
    data.value = res.data;
  });
});

const teacherPenClick = () => {
  uni.navigateTo({
    url: "/pages/user/components/teacher/teacher-info",
  });
};

function getUrlParams(url) {
  const params = {};
  const urlParts = url.split("?");

  if (urlParts.length > 1) {
    const queryString = urlParts[1];
    const pairs = queryString.split("&");

    pairs.forEach((pair) => {
      const [key, value] = pair.split("=");
      params[key] = decodeURIComponent(value);
    });
  }
  return params;
}

/*****************优化的地方*******************/
//弹出框
const showModel = ref(false);
const type = ref(0);
const modelContent = ref("");
//list
const menusClick = (item) => {
  let url = item;
  console.log("url", url);
  if (item.type === 0) {
    uni.navigateTo({
      url: item.url,
    });
  } else if (item.type === 4) {
    scan();
  } else {
    showModel.value = true;
    type.value = item.type;
    modelContent.value = item.url;
  }
  /*****************优化的地方*******************/
  // } else if (1) {
  //   phone = item.url
  // } else if (type == 2) {
  //   img.src = item.url
  // }
  // if (url === 'verify-order') {
  //   scan()
  // }
  // if (url === 'suggestion') {
  //   Feedback()
  // }
  // if (url === 'call') {
  //   call()
  // }
  // if (url === 'order-source') {
  //   showGroup.value = true;
  // }
};

const Feedback = () => {
  uni.navigateTo({
    url: "/pages/user/components/teacher/Feedback",
  });
};
const scan = () => {
  uni.scanCode({
    success: function (res) {
      const data = res.result;
      const orderdata = JSON.parse(data);
      uni.navigateTo({
        url:
          "/pages/course/components/course-info?orderSn=" +
          orderdata.orderSn +
          "&hourse=" +
          orderdata.hourse,
      });
    },
  });
};

const call = () => {
  showPhone.value = true;
};
const phoneClick = (item) => {
  const phoneNumber = item._relatedInfo.anchorTargetText;
  console.log("phoneClick", phoneNumber);
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
  });
};
</script>

<template>
  <view class="app">
    <view class="user_box">
      <image class="user_img" :src="config.baseUrl + '/file/' + data.avatar" />
      <view class="nik_name">
        <view class="name">
          <view style="font-size: 32rpx">{{ data.name }}</view>
          <view class="id_box">
            <image src="/static/user/min-avatar.svg" />
            <text>教员ID：T{{ data.id }}</text>
          </view>
        </view>
        <view class="name">
          <view style="font-size: 24rpx">身份认证：</view>
          <view class="auth">{{ data.auth === 0 ? "未认证" : "已认证" }}</view>
        </view>
      </view>
      <view class="pen" @click="teacherPenClick">
        <image src="/static/user/pen.svg" />
      </view>
    </view>
    <view class="order_box">
      <view class="mony">
        <text style="color: #a3a3a3; font-size: 20rpx">余额</text>
        <view>
          <text style="font-size: 40rpx">{{ data.money }}</text>
          <text style="color: #a3a3a3; font-size: 20rpx">元</text>
        </view>
      </view>
      <view class="mony">
        <text style="color: #a3a3a3; font-size: 20rpx">订单</text>
        <text style="font-size: 40rpx">{{ data.orderCount }}</text>
      </view>
    </view>
    <view v-if="data.auth == 1">
      <view class="list_box">
        <TnListItem v-for="(item, index) in data.ucMenus" :key="index" right-icon="right" :radius="true"
          :bottom-border="true" @click="menusClick(item)">
          <view style="display: flex">
            <image style="margin-right: 10rpx" :src="config.baseUrl + '/file/' + item.icon" />
            {{ item.title }}
          </view>
        </TnListItem>
        <button style="border-bottom: 2rpx #f8f7f8 solid" class="share" open-type="contact">
          <view class="icon_text">
            <image src="/static/user/customer.svg" />
            <view style="margin: 13rpx">官方客服</view>
          </view>
          <TnIcon name="right" size="28" color="#aeaeae" />
        </button>
      </view>
    </view>
    <view v-else>
      <view style="
          margin: 100rpx;
          display: flex;
          color: #a3a3a3;
          align-items: center;
        ">
        <text style="color: red; font-size: 36rpx">审核中</text>
      </view>
    </view>
  </view>

  <!--  弹出框-->
  <!--*****************优化的地方*******************-->
  <TnPopup v-model="showModel" open-direction="bottom">
    <view style="
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      ">
      <template v-if="type === 1">
        <view style="padding: 20rpx; font-size: 36rpx">联系电话</view>
        <view @click="phoneClick" style="padding: 20rpx">{{
          modelContent
        }}</view>
      </template>
      <template v-if="type === 2">
        <view style="padding: 20rpx; font-size: 36rpx">学忠志家教</view>
        <image style="width: 700rpx; height: 700rpx" :src="config.baseUrl + '/file/' + modelContent"
          :show-menu-by-longpress="true" />
      </template>
    </view>
  </TnPopup>
</template>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);

  .user_box {
    width: 686rpx;
    height: 192rpx;
    background: #ffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 24rpx;

    .user_img {
      width: 128rpx;
      height: 128rpx;
      border-radius: 999rpx;
    }

    .nik_name {
      width: 390rpx;
      height: 112rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name {
        display: flex;
        align-items: center;

        .id_box {
          margin-left: 10rpx;
          width: 176rpx;
          height: 40rpx;
          background: #f3f3f3;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;

          image {
            width: 20rpx;
            height: 20rpx;
          }

          text {
            font-size: 20rpx;
          }
        }

        .auth {
          width: 104rpx;
          height: 48rpx;
          background: #f3f3f3;
          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx;
        }
      }
    }

    .pen {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .order_box {
    margin: 30rpx;
    width: 686rpx;
    height: 160rpx;
    background: #ffff;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .mony {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }

  .list_box {
    margin-top: 40rpx;
    width: 686rpx;
    background: #ffffff;
    border-radius: 18rpx;
    overflow: hidden;

    image {
      height: 40rpx;
      width: 40rpx;
    }

    .share {
      width: 686rpx;
      height: 106rpx;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon_text {
        width: 542rpx;
        height: 48rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        margin: 3rpx;

        image {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }
}
</style>
